<template>
<!-- 热门搜索开始 -->
<div class="hot-search-wrapper">
  <h3 class="title">热门搜索</h3>
  <div class="hot-search" v-if="hotSearchWords.length">
    <div class="hot-search-item"
      v-for="(item,index) of hotSearchWords"
      :key="index"
      @click="$_updateStorage(item)">{{item}}</div>
  </div>
  <div class="loading-wrapper" v-if="!hotSearchWords.length">
    <me-loading/>
  </div>
</div>
  <!-- 热门搜索结束 -->
</template>
<script>
import { getHotSearchInfo } from '@/api/search'
import meLoading from '@/base/me-loading'
import { searchMixin } from '@/assets/js/mixin'
export default {
  name: 'hotSearch',
  data () {
    return {
      hotSearchWords: ''
    }
  },
  created () {
    getHotSearchInfo().then(data => { // 获取异步数据
      this.hotSearchWords = data
    })
  },
  components: {
    meLoading
  },
  mixins: [searchMixin]
}
</script>
<style lang="stylus" scoped>
.hot-search-wrapper
  .title
    padding-left 10px
    height 30px
    line-height  30px
    font-size 20px
  .hot-search
    width 100%
    display flex
    flex-wrap wrap
    .hot-search-item
      height 40px
      line-height 40px
      margin 10px
      background-color #fff
      padding 0 10px
      font-size 20px
  .loading-wrapper
    display flex
    justify-content center
    align-items center
    height 180px
</style>
